<button
  class="kuiLink"
  ng-if="linkToTop"
  ng-click="paginate.goToTop()"
  data-test-subj="paginateControlsLinkToTop"
>
  Scroll to top
</button>

<div
  class="pagination-other-pages"
  data-test-subj="paginationControls"
>
  <ul class="pagination-other-pages-list pagination-sm" ng-if="page.count > 1">
    <li ng-style="{'visibility':'hidden'}" ng-if="page.first">
      <button class="kuiLink" ng-click="paginate.goToPage(page.prev)">«</button>
    </li>
    <li ng-style="{'visibility':'visible'}" ng-if="!page.first">
      <button class="kuiLink" ng-click="paginate.goToPage(page.prev)">«</button>
    </li>

    <li ng-if="!otherPages.containsFirst">
      <button class="kuiLink" ng-click="paginate.goToPage(1)">1...</button>
    </li>

    <li
      ng-repeat="other in otherPages"
      ng-class="{ active: other.number === page.number }"
    >
      <button
        class="kuiLink"
        ng-click="paginate.goToPage(other)"
      >
        {{other.number}}
      </button>
    </li>

    <li ng-if="!otherPages.containsLast">
      <button class="kuiLink" ng-click="paginate.goToPage(page.count)">...{{page.count}}</button>
    </li>

    <li ng-style="{'visibility':'hidden'}" ng-if="page.last">
      <button class="kuiLink" ng-click="paginate.goToPage(page.next)">»</button>
    </li>
    <li ng-style="{'visibility':'visible'}" ng-if="!page.last">
      <button class="kuiLink" ng-click="paginate.goToPage(page.next)">»</button>
    </li>
  </ul>
</div>

<form class="form-inline pagination-size" ng-if="showSelector">
  <div class="form-group">
    <label>Page Size</label>
    <select
      ng-model="paginate.perPage"
      ng-options="opt.value as opt.title for opt in paginate.sizeOptions"
      data-test-subj="paginateControlsPageSizeSelect"
    ></select>
  </div>
</form>
